<template>
  <!-- 业务报告 -->
  <div class="business-report">
    <a-card class="card-one">
      <div class="card-one-box">
        <div class="button-box">
          <a-range-picker
            class="button"
            v-model:value="formData.rangePickerValue"
            @change="changeRangePicker"
          />
          <a-button class="button" @click="clickReset">重置</a-button>
          <a-button type="primary" @click="clickQuery">查询</a-button>
        </div>
        <div class="button-box">
          <a-button class="button" @click="clickBusinessReportExport(1)"
            >日报导出</a-button
          >
          <a-button class="button" @click="clickBusinessReportExport(2)"
            >周报导出</a-button
          >
          <a-button class="button" @click="clickBusinessReportExport(3)"
            >月报导出</a-button
          >
          <a-button
            class="button"
            type="primary"
            @click="clickBusinessReportExport(4)"
            >全部导出</a-button
          >
        </div>
      </div>
    </a-card>
    <a-card class="card card1" title="业务报告">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabs">
        <a-tab-pane v-for="item in lineListId" :key="item.id" :tab="item.title">
          <div class="day">
            <div class="day-row1">
              <div class="item" v-for="itemTwo in item.orderAllCount">
                <div>{{ itemTwo.processName }}</div>
                <div>{{ itemTwo.orderCount }}</div>
              </div>
            </div>
            <div class="day-row2">
              <div class="line" :id="item.id"></div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  // 引入方法
  import {
    defineProps,
    defineEmits,
    watch,
    onMounted,
    ref,
    nextTick,
  } from 'vue'
  import * as echarts from 'echarts'
  import api from '@/axios/api.js'
  import commonMethod from '@/common-method/common-method'
  import { message } from 'ant-design-vue'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const formData = ref({
    workOrderType: undefined,
    startTime: undefined,
    endTime: undefined,
    rangePickerValue: undefined,
  })
  const activeKey = ref('line1') //当前选中的tab
  const innerHeight = window.innerHeight //浏览器视口高度
  const innerWidth = window.innerWidth //浏览器视口宽度
  const lineListId = ref([
    {
      title: '日报',
      id: 'line1',
      workOrderType: 1,
      orderAllCount: [],
      xAxisData: [],
      legendData: [],
      seriesData: [],
    },
    {
      title: '周报',
      id: 'line2',
      workOrderType: 2,
      orderAllCount: [],
      xAxisData: [],
      legendData: [],
      seriesData: [],
    },
    {
      title: '月报',
      id: 'line3',
      workOrderType: 3,
      orderAllCount: [],
      xAxisData: [],
      legendData: [],
      seriesData: [],
    },
  ])
  onMounted(() => {
    nextTick(() => {
      pageInit()
    })
  })
  // 自定义方法
  //业务报告导出
  const getBusinessReportExport = async data => {
    const res = await api.getBusinessReportExport(data)
    console.log('业务报告导出', res)
    if (res.status === 200) {
      commonMethod.derive(res)
    } else {
      message.error(res.data.msg)
    }
  }
  const pageInit = () => {
    lineListId.value.forEach(item => {
      api
        .getBusinessReport({
          ...formData.value,
          workOrderType: item.workOrderType,
        })
        .then(res => {
          console.log('获取业务报告', res)
          item.orderAllCount = res.data.data.orderAllCount
          item.xAxisData = res.data.data.orderDayCount.map(itemTwo => {
            return itemTwo.dateTime
          })
          if (res.data.data.orderDayCount.length > 0) {
            item.legendData = res.data.data.orderDayCount[0].orderList.map(
              itemTwo => {
                return itemTwo.processName
              }
            )
          }
          item.seriesData = item.legendData.map((itemFour, index) => {
            let data = []
            res.data.data.orderDayCount.forEach(itemTwo => {
              itemTwo.orderList.forEach(itemThree => {
                if (itemThree.processName === itemFour) {
                  data.push(itemThree.orderCount)
                }
              })
            })
            let itemStyle
            let areaStyle
            if (index === 0) {
              itemStyle = {
                color: '#5FD5EC',
              }
              areaStyle = {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(95, 213, 236, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(77, 119, 255, 0)',
                  },
                ]),
              }
            } else if (index === 1) {
              itemStyle = {
                color: 'rgba(72, 255, 178, 1)',
              }
              areaStyle = {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(72, 255, 178, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(77, 119, 255,0)',
                  },
                ]),
              }
            } else if (index === 2) {
              itemStyle = {
                color: 'rgba(67, 70, 211, 1)',
              }
              areaStyle = {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(67, 70, 211, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(77, 119, 255,0)',
                  },
                ]),
              }
            } else if (index === 3) {
              itemStyle = {
                color: 'rgba(55, 142, 96, 1)',
              }
              areaStyle = {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(55, 142, 96, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(77, 119, 255,0)',
                  },
                ]),
              }
            } else if (index === 4) {
              itemStyle = {
                color: 'rgba(255, 207, 95, 1)',
              }
              areaStyle = {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(255, 207, 95, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(72, 255, 178, 0)',
                  },
                ]),
              }
            }
            return {
              name: itemFour,
              type: 'line',
              smooth: true,
              data,
              symbol: 'none',
              itemStyle,
              areaStyle,
            }
          })
          createOrderNumberLine(
            item.id,
            item.xAxisData,
            item.legendData,
            item.seriesData
          )
        })
    })
  }
  //创建折线图
  const createOrderNumberLine = (id, xAxisData, legendData, seriesData) => {
    var chartDom = document.getElementById(id)
    var myChart = echarts.init(chartDom)
    var option

    option = {
      textStyle: {
        color: '#1f1f1f',
        fontSize: (14 / 1080) * innerHeight,
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        icon: 'circle',
        data: legendData,
        itemHeight: (14 / 1080) * innerHeight,
        itemGap: (20 / 1920) * innerWidth, // 图例项之间的间距
        textStyle: {
          color: '#1f1f1f',
          fontSize: (14 / 1080) * innerHeight,
        },
      },
      grid: {
        left: (50 / 1080) * innerHeight,
        right: (16 / 1080) * innerHeight,
        top: (36 / 1080) * innerHeight,
        bottom: (50 / 1080) * innerHeight,
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          fontSize: (14 / 1080) * innerHeight,
        },
        boundaryGap: false,
        data: xAxisData,
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          fontSize: (14 / 1080) * innerHeight,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(233, 233, 233, 0.2)',
          },
        },
      },
      series: seriesData,
    }
    option && myChart.setOption(option)
  }
  //点击tab
  const changeTabs = () => {
    lineListId.value.forEach(item => {
      setTimeout(() => {
        createOrderNumberLine(
          item.id,
          item.xAxisData,
          item.legendData,
          item.seriesData
        )
      }, 0)
    })
  }
  //点击导出
  const clickBusinessReportExport = value => {
    getBusinessReportExport({ ...formData.value, workOrderType: value })
  }
  //点击重置
  const clickReset = () => {
    formData.value = {
      workOrderType: undefined,
      startTime: undefined,
      endTime: undefined,
      rangePickerValue: undefined,
    }
    pageInit()
  }
  //点击查询
  const clickQuery = () => {
    pageInit()
  }
  //时间范围改变
  const changeRangePicker = (date, dateStrings) => {
    formData.value.startTime = dateStrings[0]
    formData.value.endTime = dateStrings[1]
  }
</script>
<style lang="less" scoped>
  .business-report {
    .card-one {
      margin-bottom: (20 / @vh);

      .card-one-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .button-box {
          .button {
            margin-right: (10 / @vw);
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    .card1 {
      :deep(.ant-card-body) {
        padding-top: 0;
      }

      .day {
        .day-row1 {
          display: flex;
          justify-content: space-between;
          margin-bottom: (60 / @vh);
          .item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: (16 / @vh) (16 / @vw) (26 / @vh);
            width: (260 / @vw);
            height: (120 / @vh);
            border-radius: 6px;
            &:nth-child(n) {
              background: linear-gradient(180deg, #f7f8ff 0%, #ececff 100%);
            }
            &:nth-child(2n) {
              background: linear-gradient(180deg, #f6fef2 0%, #e6feee 100%);
            }
            &:nth-child(3n) {
              background: linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%);
            }
            div:nth-child(1) {
              font-size: (16 / @vw);
              font-weight: bold;
            }
            div:nth-child(2) {
              font-size: (24 / @vw);
              font-weight: bold;
            }
          }
        }
        .day-row2 {
          width: 100%;
          height: (320 / @vh);
          .line {
            width: 100%;
            height: 100%;
          }
          #line2 {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
